<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: hidden;

    }
  </style>
</head>

<body>
  <canvas id="rain"></canvas>
  <script>
    const columnWidth = 30
    const width = window.innerWidth
    const height = window.innerHeight

    const canvas = document.getElementById('rain')
    const ctx = canvas.getContext('2d')
    canvas.width = width
    canvas.height = height
    const rainDrops = new Array(Math.floor(width / columnWidth)).fill(1)
    function getText() {
      const text = '逆水行舟，不进则退'
      return text[Math.floor(Math.random() * text.length)]
    }
    function getColor() {
      return `rgba(${Math.floor(Math.random() * 235 + 10)},${Math.floor(Math.random() * 235 + 10)},${Math.floor(Math.random() * 235 + 10)})`
    }
    function draw() {
      ctx.fillStyle = 'rgba(255,255,255,0.2)'
      ctx.fillRect(0, 0, width, height)

      ctx.fillStyle = getColor()
      ctx.font = '20px Arial'
      for (let i = 0; i < rainDrops.length; i++) {
        const x = i * columnWidth
        const y = rainDrops[i] * 20
        ctx.fillText(getText(), x, y)
        rainDrops[i]++
        if (rainDrops[i] * 20 > height && Math.random() > 0.98) {
          rainDrops[i] = 0
        }
      }
    }
    function RAF() {
      draw()
      setTimeout(RAF, 40)
      // requestAnimationFrame(RAF)
    }
    RAF()
  </script>
</body>

</html>